<template>
    <div class="collect-container">
        <el-table v-loading="loading" :data="collectList" style="width: 100%">
            <el-table-column prop="hotelName" label="酒店名称" width="180">
            </el-table-column>
            <el-table-column prop="address" label="酒店地址">
            </el-table-column>
            <el-table-column label="评分">
                <template slot-scope="scope">
                    <el-rate v-model="scope.row.starLevel" disabled show-score text-color="#ff9900">
                    </el-rate>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleView(scope.row)">查看</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)">取消收藏</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" layout="prev, pager, next"
            :total="total" style="text-align: center; margin: 20px 0;">
        </el-pagination>

        <!-- 酒店详情对话框 -->
        <el-dialog title="酒店详情" :visible.sync="dialogVisible" width="60%">
            <div v-if="currentHotel" class="hotel-detail">
                <div class="hotel-header">
                    <el-image :src="currentHotel.image" style="height: 150px;"></el-image>
                </div>
                <el-divider></el-divider>
                <div class="hotel-info">
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="酒店名称">{{ currentHotel.hotelName }}</el-descriptions-item>
                        <el-descriptions-item label="酒店地址">{{ currentHotel.address }}</el-descriptions-item>
                        <el-descriptions-item label="联系电话">{{ currentHotel.phone }}</el-descriptions-item>
                        <el-descriptions-item label="酒店星级">
                            <el-rate v-model="currentHotel.starLevel" disabled text-color="#ff9900">
                            </el-rate></el-descriptions-item>
                        <el-descriptions-item label="入住时间">{{ currentHotel.inTime }}</el-descriptions-item>
                        <el-descriptions-item label="离开时间">{{ currentHotel.outTime }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div class="hotel-intro">
                    <h3>酒店介绍</h3>
                    <p>{{ currentHotel.introduce }}</p>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getCollectList, getCollectDelete } from '@/api'

export default {
    name: 'Collect',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            // 收藏列表
            collectList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            // 是否显示弹出层
            dialogVisible: false,
            // 当前酒店
            currentHotel: null
        }
    },
    created() {
        this.getList()
    },
    methods: {
        /** 每页条数改变 */
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList()
        },
        /** 当前页改变 */
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.getList()
        },
        /** 查询收藏列表 */
        getList() {
            this.loading = true
            getCollectList(this.queryParams).then(response => {
                this.collectList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        /** 查看按钮操作 */
        handleView(row) {
            this.currentHotel = row
            this.dialogVisible = true
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            this.$confirm('确认要取消收藏该酒店吗?').then(() => {
                getCollectDelete(row.hotelId).catch(err => {
                }).then(() => {
                    this.getList()
                })
            }).catch(() => { })
        },
        formatDateTime(dateTime) {
            if (!dateTime) return '';
            const date = new Date(dateTime);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }
    }
}
</script>

<style scoped>
.collect-container {
    padding: 20px;
}

.hotel-detail {
    padding: 20px;
}

.hotel-header {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-content: center;
}

.hotel-header h2 {
    margin: 0 0 10px 0;
    font-size: 24px;
    color: #303133;
}

.hotel-rating {
    margin-bottom: 20px;
}

.hotel-info {
    margin-bottom: 20px;
}

.hotel-intro h3 {
    margin: 20px 0 10px 0;
    font-size: 16px;
    color: #303133;
}

.hotel-intro p {
    line-height: 1.6;
    color: #606266;
}
</style>